<template>
    <h1 class="row-title">折叠面板</h1>
    <div class="row">
        <XiaoQuan-Collapse v-model="opendValue" @change="changeHandle">
            <XiaoQuan-CollapseItem name="a" title="home">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, fugit.
            </XiaoQuan-CollapseItem>
            <XiaoQuan-CollapseItem name="b" title="about">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, ut!
            </XiaoQuan-CollapseItem>
            <XiaoQuan-CollapseItem name="c" title="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus deserunt esse libero natus qui repellendus?
            </XiaoQuan-CollapseItem>
            <XiaoQuan-CollapseItem name="d" title="contact" disabled>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate fuga perferendis ratione?
            </XiaoQuan-CollapseItem>
        </XiaoQuan-Collapse>
    </div>
    <h1 class="row-title">手风琴模式</h1>
    <div class="row">
        <XiaoQuan-Collapse v-model="opendValue2" @change="changeHandle" :accordion="true">
            <XiaoQuan-CollapseItem name="a" title="home">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, fugit.
            </XiaoQuan-CollapseItem>
            <XiaoQuan-CollapseItem name="b" title="about">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, ut!
            </XiaoQuan-CollapseItem>
            <XiaoQuan-CollapseItem name="c" title="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus deserunt esse libero natus qui repellendus?
            </XiaoQuan-CollapseItem>
            <XiaoQuan-CollapseItem name="d" title="contact" disabled>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate fuga perferendis ratione?
            </XiaoQuan-CollapseItem>
        </XiaoQuan-Collapse>
    </div>
    <h1 class="row-title">自定义标题</h1>
    <div class="row">
        <XiaoQuan-Collapse v-model="openedValue3" accordion  @change="changeHandle">
            <XiaoQuan-CollapseItem name="Consistency" title="Consistency">
                <template #title>
                    <div class="titleContainer">
                        <span class="title l">Consistency</span>
                        <XiaoQuan-Icon icon="house" />
                    </div>
                </template>
                <div>
                    Consistent with real life: in line with the process and logic of real life, and comply
                    with languages and habits that the users are used to;
                </div>
                <div>
                    Consistent within interface: all elements should be consistent, such as: design style,
                    icons and texts, position of elements, etc.
                </div>
            </XiaoQuan-CollapseItem>
            <XiaoQuan-CollapseItem name="Feedback">
                <template #title>
                    <div class="titleContainer">
                        <span class="title l">Feedback</span>
                        <XiaoQuan-Icon icon="image" />
                    </div>
                </template>
                <div>
                    Operation feedback: enable the users to clearly perceive their operations by style updates
                    and interactive effects;
                </div>
                <div>
                    Visual feedback: reflect current state by updating or rearranging elements of the page.
                </div>
            </XiaoQuan-CollapseItem>
            <XiaoQuan-CollapseItem name="Efficiency">
                <template #title>
                    <div class="titleContainer">
                        <XiaoQuan-Icon icon="phone" />
                        <span class="title">Efficiency</span>
                    </div>
                </template>
                <div>Simplify the process: keep operating process simple and intuitive;</div>
                <div>
                    Definite and clear: enunciate your intentions clearly so that the users can quickly
                    understand and make decisions;
                </div>
                <div>
                    Easy to identify: the interface should be straightforward, which helps the users to
                    identify and frees them from memorizing and recalling.
                </div>
            </XiaoQuan-CollapseItem>
            <XiaoQuan-CollapseItem name="Controllability" title="Controllability">
                <template #title>
                    <div class="titleContainer">
                        <XiaoQuan-Icon icon="star" />
                        <span class="title">Controllability</span>
                    </div>
                </template>
                <div>
                    Decision making: giving advices about operations is acceptable, but do not make decisions
                    for the users;
                </div>
                <div>
                    Controlled consequences: users should be granted the freedom to operate, including
                    canceling, aborting or terminating current operation.
                </div>
            </XiaoQuan-CollapseItem>
        </XiaoQuan-Collapse>
    </div>
</template>

<script setup>
    import { ref } from "vue";
    const opendValue = ref(['a']);
    const opendValue2 = ref(['a']);
    const openedValue3 = ref(['Consistency']);
    const changeHandle = (opendValue)=> {
        console.log("当前折叠板选中的是：", opendValue)
        // opendValue.value = opendValue;
    }
</script>

<style lang="scss" scoped>
    .titleContainer {
        display: flex;
    }
    .title {
        margin: 0 5px;
        &.l {
            margin-left: 0;
        }
    }
</style>